<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <text class="title">培训课程</text>
            <picker mode='date' :value="selectedYear" start="2020" end="2030" fields="year" @change="onYearChange"
                class="year-picker">
                <view class="picker-text">{{ selectedYear }}年</view>
            </picker>
        </view>

        <!-- 筛选标签 -->
        <view class="filter-bar">
            <uni-segmented-control :current="filterIndex" :values="filters" @clickItem="onFilterChange"
                styleType="button" activeColor="#409EFF" />
        </view>

        <!-- 课程卡片列表 -->
        <view class="course-list">
            <view v-for="item in filteredCourses" :key="item.id" class="course-card">
                <!-- 左侧内容 -->
                <view class="course-content">
                    <view class="course-title">{{ item.title }}</view>
                    <view class="course-status">状态：{{ item.status }}</view>
                </view>

                <!-- 右侧按钮 -->
                <button class="detail-btn" @click="goDetail(item)">详情</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedYear = ref('2024')
const filters = ref(['全部', '待学习', '已学习', '已过期'])
const filterIndex = ref(0)

const courses = ref([
    { id: 1, title: '消防安全培训', status: '待学习' },
    { id: 2, title: '人防安全培训', status: '已学习' },
    { id: 3, title: '用电安全培训', status: '已过期' }
])

const filteredCourses = computed(() => {
    if (filterIndex.value === 0) return courses.value
    return courses.value.filter(c => c.status === filters.value[filterIndex.value])
})

function onYearChange(e) {
    selectedYear.value = e.detail.value
    // 这里可以根据年份请求不同数据
}

function onFilterChange(e) {
    filterIndex.value = e.currentIndex
}

function goDetail(item) {
    uni.navigateTo({
        url: `/pages/study/detail?id=${item.id}&title=${encodeURIComponent(item.title)}`
    })
}
</script>

<style scoped>
.container {
    padding: 0 10rpx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
}

.title {
    font-weight: bold;
    font-size: 36rpx;
}

.year-picker {
    background: #f5f5f5;
    border-radius: 8rpx;
    padding: 8rpx 20rpx;
}

.picker-text {
    color: #333;
}

.filter-bar {
    margin-bottom: 20rpx;
}

.course-card {
    background: #fff;
    border: 2rpx solid #409EFF;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;
    padding: 24rpx;
    display: flex;
    align-items: center;
}

.course-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-title {
    font-weight: bold;
    font-size: 30rpx;
    color: #000;
    margin-bottom: 8rpx;
}

.course-status {
    color: #000;
    font-size: 28rpx;
}

.detail-btn {
    background: #409EFF;
    color: #fff;
    border-radius: 8rpx;
    padding: 12rpx 48rpx;
    font-size: 28rpx;
    border: none;
    margin-left: 20rpx;
    min-width: 120rpx;
}
</style>
